<template>
    <view v-if="visible" class="edit-popup">
        <view class="popup-title">编辑内容</view>
        <textarea v-model="localEditContent" class="edit-textarea" :adjust-position="false" placeholder="请输入内容" />
        <view class="popup-btns">
            <button class="btn cancel" @click="closePopup">取消</button>
            <button class="btn confirm" @click="confirmEdit">确定</button>
        </view>
    </view>
</template>

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue';

const props = defineProps({
    editContent: String // 接收父组件传递的编辑内容
});

const emit = defineEmits(['update:editContent', 'confirm']);

const visible = ref(false);
const localEditContent = ref(''); // 本地编辑内容

// 监听父组件传递的 editContent，更新本地内容
watch(() => props.editContent, (newVal) => {
    localEditContent.value = newVal;
}, { immediate: true });

const confirmEdit = () => {
    emit('update:editContent', localEditContent.value); // 将本地内容传递回父组件
    emit('confirm');
    closePopup();
};

const closePopup = () => {
    visible.value = false; // 只关闭弹窗，不触发 cancel 事件
};

// 暴露 open 和 close 方法给父组件
const open = () => {
    visible.value = true;
};

defineExpose({ open, close: closePopup });
</script>

<style lang="scss" scoped>
.edit-popup {
    background: #fff;
    border-radius: 24rpx;
    padding: 30rpx;
    width: 600rpx;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.32);

    .popup-title {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30rpx;
    }

    .edit-textarea {
        width: 100%;
        height: 300rpx;
        border: 2rpx solid #dcdfe6;
        border-radius: 12rpx;
        padding: 20rpx;
        font-size: 28rpx;
        margin-bottom: 30rpx;
        box-sizing: border-box;
    }

    .popup-btns {
        display: flex;
        gap: 20rpx;

        .btn {
            flex: 1;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            border-radius: 8rpx;
            font-size: 28rpx;

            &.cancel {
                background: #f5f7fa;
                color: #666;
            }

            &.confirm {
                background: #409eff;
                color: #fff;
            }
        }
    }
}
</style>